<template>
  <div>
    <button
      @click="run()"
      class="begin"
      :style="{ display: this.display == 'none' ? 'none' : '' }"
    >
      开 始
    </button>
    <button
      @click="stop()"
      class="begin"
      :style="{ display: this.display == 'none' ? '' : 'none' }"
    >
      停 止
    </button>
    <button
      @click="re()"
      class="begin re"
      :style="{ display: this.display == 'none' ? '' : 'none' }"
      disabled="disabled"
    >
      刷 新
    </button>
    <p class="info">
      <span>温馨提示：</span
      >此功能仅用于模拟号牌选择，最终号牌以车辆管理所选择的为准！
    </p>
    <div id="all" class="clearfix"></div>
  </div>
</template>

<script>
import unit from "../../../unit/unit.js";
export default {
  name: "slsc",
  props: {
    isTriplets: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      en: [],
      num: [],
      tick: [],
      display: "",
      csl: null,
      dis: "",
    };
  },
  created() {
    // 清空
    unit.setCookie("mouth", "");
    unit.setCookie("pages", "");
    unit.setCookie("selectdate", "");
    this.en = unit.aAndZ();
    this.num = unit.Num();
  },
  methods: {
    run() {
      this.display = "none";
      var id_ = document.getElementById("all");
      let en1, en2, ra1, ra2, ra3, num;
      for (var i = 0; i <= 29; i++) {
        var html = document.createElement("div");
        html.innerHTML = '<div class="box_slsc">川L ' + num + "</div>";
        id_.appendChild(html);
      }
      this.csl = setInterval(() => {
        en1 = this.en[Math.floor(Math.random() * this.en.length)];
        en2 = this.en[Math.floor(Math.random() * this.en.length)];
        ra1 = String(this.num[Math.floor(Math.random() * this.num.length)]);
        ra2 = String(this.num[Math.floor(Math.random() * this.num.length)]);
        ra3 = String(this.num[Math.floor(Math.random() * this.num.length)]);
        num = en1 + en2 + ra1 + ra2 + ra3;
        for (let i = 0; i <= 29; i++) {
          document.getElementsByClassName("box_slsc")[i].innerHTML =
            "川L " + this.tick[Math.floor(Math.random() * this.tick.length)];
        }
        this.tick.push(num);
      }, 35);
    },
    stop() {
      clearInterval(this.csl);
      this.csl = null;
      document.getElementsByClassName("re")[0].disabled = false;
    },
    re() {
      if (this.csl == null) {
        this.display = "";
        let all = document.getElementById("all");
        let allChild = all.childNodes;
        for (let i = allChild.length - 1; i >= 0; i--) {
          all.removeChild(allChild[i]);
        }
        document.getElementsByClassName("re")[0].disabled = true;
      }

      //   console.log(document.getElementById("all"));
    },
  },
};
</script>

<style>
.begin {
  width: 100px;
  height: 50px;
  border-radius: 10px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  margin-right: 20px;
}
#all {
  width: 100%;
}
.info {
  /* text-align: center; */
  font-size: 20px;
}
.info span {
  color: red;
}
.box_slsc {
  background: #fbc400;
  width: 15%;
  float: left;
  /* color: white; */
  border: 4px solid #0f1103;
  border-radius: 20px;
  margin-left: 3%;
  text-align: center;
  height: 80px;
  line-height: 80px;
  margin-top: 20px;
  font-size: 28px;
  font-weight: bold;
}
.clearfix:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
</style>